<template>
  <div class="bob">
    <div id="login-box">
      <h1>Login</h1>
      <div class="form">
        <div class="item">
          <input type="text" v-model="userName" placeholder="Username" />
        </div>
        <div class="item">
          <input type="password" v-model="userPass" placeholder="Password" />
        </div>
      </div>
      <el-button :plain="true" @click="go">出发！GO</el-button>
      <el-button :plain="true" @click="back">新用户看这里</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "denglu",
  data() {
    return {
      userName: "",
      userPass: "",
    };
  },
  methods: {
    go() {
      this.$message({
        message: "恭喜你，登录成功",
        type: "success",
      });
      sessionStorage.setItem("userName", this.userName);
      sessionStorage.setItem("userPass", this.userPass);
      this.$router.push({
        name: "home",
      });
    },
    back() {
      this.$message('即将前往注册界面');
      this.$router.push({
        path: "zhuce",
      });
    },
  },
};
</script>



<style land="less"  scoped>
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #ffffff;
  /* placeholder字体大小  */
  font-size: 14px;
}
#login-box {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 45rem;
  height: auto;
  /* height: 30rem; */
  background-color: #00000060; /*颜色的后两位是透明度*/
  text-align: center;
  padding: 2rem 4rem;
  /* padding-bottom: 0; */
}
#login-box h1 {
  font-size: 3rem;
  margin: 1rem 0;
  color: #ffffff;
}
#login-box .form {
  padding: 1rem 0;
}
#login-box .form .item input {
  color: #ffffff;
  width: 20rem;
  font-size: 18px;
  border-bottom: 2px solid #ffffff;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  background: transparent;
  /* color: #ffffff; */
}
#login-box .form .item i {
  font-size: 1.8rem;
  color: #ffffff;
}
#login-box button {
  width: 18rem;
  height: 3rem;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  border-radius: 1.5rem;
  background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
</style>